<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入轮播图样式 -->
    <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/about.css">
    <link rel="stylesheet" href="./css/reset.css">
    <script src="./js/jquery-1.12.3.min.js"></script>
    <title>Document</title>

</head>


<body>
    <!-- 顶部导航布局开始 -->
    <div>
        <div class="nav_login">
            <div class="juzhong">
                <p>Ting域主持人欢迎您！ 客服：18812345678</p>
                <p class="p_login"> <a href="#"> 登录 | 注册</a></p>
            </div>
        </div>
        <div class="nav_logo">
            <div class="juzhong">
                <img src="./img/主持人_关于我们_03.jpg" alt="">
            </div>
        </div>
        <div class="nav_img">
            <img src="./img/img.jpg" alt="">
        </div>
        <div class="nav_label">
            <div class="juzhong">
                <ui>
                    <li> <a href="#">首页</a> </li>
                    <li> <a href="#">主持人</a> </li>
                    <li> <a href="#">加入我们</a> </li>
                    <li> <a href="#">关于我们</a> </li>
                </ui>
            </div>
        </div>
    </div>
    <!-- 顶部导航布局结束 -->
    <!-- 关于我们介绍布局开始 -->
    <div class="about_us">
        <div class="juzhong">
            <p class="about_title">关于我们</p>
            <p class="about_icon">————</p>
            <p class="about_content">
                北京Ting域主持人团队成立于2019年1月，是一支集婚礼主持，商务主持于一体的综合性主持人团队，团队内部主持人均在行业内有三年以上的主持经验，舞台阅历丰富，与北京地区各大婚庆公司均有合作，Ting域主持人团队有统一的执行标准，完善的管理制度，经过近一年的运行，现已基本形成“主持人服务流程标准化”，北京地区人均年接单量60+，目前团队已初具规模，全力打造“服务至上”的团队文化，以“新人满意度”为衡量主持人能力的标准，相信我们的出现一定会给现在不太“景气”的这个行业带来一缕春风。Ting域，听到更温暖的声音，听到更感动的故事，遇到更好的你们。
            </p>
            <img src="./img/主持人_关于我们_08.jpg" alt="">
        </div>
    </div>
    <!-- 关于我们介绍布局结束 -->
    <!-- 我们的服务布局开始 -->
    <div class="service">
        <div class="service_background">
            <div class="juzhong">
                <p class="service_title">我们的服务</p>
                <p class="about_icon">————</p>
                <div class="service_content_left1">
                    <img src="./img/index_kc_bg .png" alt="">
                    <img src="./img/椭圆 1.png" alt="" class="round1">
                    <p>
                        <span>课程顾问团队</span>
                        <br>
                        尚学堂为每个就业班都安排有优秀的技术指导老师，无论是白天上课还是晚上自习，360度全方位对学员疑惑进行知识点梳理、答疑、辅导。尤其是给予末位学员重点关心，以确保知识点掌握上每个学员不掉队，真正落实不放弃任何一个学员
                    </p>
                </div>
                <div class="service_content_left2">
                    <img src="./img/index_kc_bg3.png" alt="">
                    <img src="./img/椭圆 1 拷贝 2.png" alt="" class="round2">
                    <p>
                        <span>课程顾问团队</span>
                        <br>
                        尚学堂为每个就业班都安排有优秀的技术指导老师，无论是白天上课还是晚上自习，360度全方位对学员疑惑进行知识点梳理、答疑、辅导。尤其是给予末位学员重点关心，以确保知识点掌握上每个学员不掉队，真正落实不放弃任何一个学员
                    </p>
                </div>
                <div class="service_content_left3">
                    <img src="./img/index_kc_bg .png" alt="">
                    <img src="./img/椭圆 1 拷贝 3.png" alt="" class="round3">
                    <p>
                        <span>课程顾问团队</span>
                        <br>
                        尚学堂为每个就业班都安排有优秀的技术指导老师，无论是白天上课还是晚上自习，360度全方位对学员疑惑进行知识点梳理、答疑、辅导。尤其是给予末位学员重点关心，以确保知识点掌握上每个学员不掉队，真正落实不放弃任何一个学员
                    </p>
                </div>
                <div class="service_content_left4">
                    <img src="./img/index_kc_bg3.png" alt="">
                    <img src="./img/椭圆 1 拷贝.png" alt="" class="round4">
                    <p>
                        <span>课程顾问团队</span>
                        <br>
                        尚学堂为每个就业班都安排有优秀的技术指导老师，无论是白天上课还是晚上自习，360度全方位对学员疑惑进行知识点梳理、答疑、辅导。尤其是给予末位学员重点关心，以确保知识点掌握上每个学员不掉队，真正落实不放弃任何一个学员
                    </p>
                </div>
            </div>
        </div>

    </div>
    <!-- 我们的服务布局结束 -->
    <!-- 我们的优势布局开始 -->
    <div class="goodness">
        <div class="juzhong">
            <p class="about_title">我们的优势</p>
            <p class="about_icon">————</p>

                <div class="swiper-container" id="banner">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/图层 23 拷贝.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/图层 23 拷贝.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/图层 23 拷贝.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/图层 23 拷贝.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/图层 23 拷贝.png">
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <!-- 我们的优势布局结束 -->
    <!-- 页脚布局开始 -->
    <div class="foot_top">
        <div class="juzhong">
            <p class="foot_title">立即申请加入团队</p>
            <br>
            <p>请扫描下方二维码，备注：姓名+申请加入团队</p>
            <img src="./img/图层 40 拷贝.png" alt="">
        </div>
    </div>
    <div class='footer'>
        <div class='footer_warp'>
            <div class='footer_left'>
                <p class='footer_left_top'>联系我们</p>
                <p class='footer_left_content'>公司地址：北京市长安街天安门1号 / 监督电话：18812345678</p>
                <p class='footer_left_bottom'>copyright2016-2019 版权归Ting域主持人所有 </p>
            </div>
            <div class='footer_right'>
                <div class='QR_left'>
                    <img src="img/QR_04.png" alt="">
                    <div class='QR_left_img'>
                        <img src="img/QR_03.png" alt="">
                    </div>
                    <p>官方服务号</p>
                </div>
                <div class='QR_left'>
                    <img src="img//QR_02.png" alt="">
                    <div class='QR_left_img'>
                        <img src="img//QR_01.png" alt="">
                    </div>
                    <p>官方服务号</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚布局结束 -->
    <!-- 固定定位导航布局开始 -->
    <div class="QR_right">
        <div class='QR_right_top'>
            <img src="img/QR_small.png" alt="">
            <div class='QR_box'>
                <div class='QR_box_content'>
                    <img src="img/QR_right.png" alt="">
                    <p class='QR_box_content_font'>关注官方二维码接受订单通知</p>
                </div>
                <div class='QR_box_triangle'>
                    <img src="img/sanjiao.png" alt="">
                </div>
            </div>
        </div>
        <a href="#">
            <div class='QR_right_bottom'>
                <img src="img/jiantou.png" alt="">
            </div>
        </a>
    </div>
    <!-- 固定定位导航布局结束 -->
</body>

<!-- 轮播图 -->
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
<script type="text/javascript">
// 顶部导航点击换色事件
    $(".nav_label li").click(function () {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');

    })
// 轮播图
    $(function () {
        var mySwiper = new Swiper("#banner", {
            loop: true,
            loopedSlides: 5,
            slidesPerView: 'auto',
            autoplay: true,
            centeredSlides: true,
            initialSlide: 2,
            watchSlidesProgress: true,
            pagination: {
                el: '.banner_page',
                clickable: true,
            },
            on: {
                progress: function (progress) {
                    for (i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i);
                        var slideProgress = this.slides[i].progress;
                        if (Math.abs(slideProgress) > 1) {
                            var modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;
                        }
                        translate = slideProgress * modify * 318 + 'px';
                        scale = 1 - Math.abs(slideProgress) / 5;
                        zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                        slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                        slide.css('zIndex', zIndex);
                        slide.css('opacity', 1);
                        if (Math.abs(slideProgress) > 3) {
                            slide.css('opacity', 0);
                        }
                    }
                },
                setTransition: function (transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }

                }
            }
        })
    })
</script>
</html>